<template>
    <div class="rnav">
        <el-row class="nav-icon icon1">       
            <i class="el-icon-thumb" style="font-size:24px;color:#a5a5a5"></i>
            <div class="icon1-text">1</div>
        </el-row>

        <el-row class="nav-icon icon2">
            <i class="el-icon-star-on" style="font-size:27px;color:#a5a5a5"></i>

            <div>2</div>
        </el-row>

        <el-row class="nav-icon icon3">
            <i class="el-icon-chat-line-round" style="font-size:25px;color:#a5a5a5"></i>
            <div>3</div>
        </el-row>
        
    </div>
</template>
<style>
.nav-icon{
    height:60px;
    padding-bottom: 2px;
    text-align: center;
}
.icon1{
    cursor:pointer;
}
.icon2,.icon3{
    border-top: 1px solid #EBEEF5;
    cursor:pointer;
}
i{
    padding:8px 0 6px 0;
}
.icon1:hover{
    background:#f8fafc;
}
.icon2:hover{
    background:#f8fafc;
}

.icon3:hover{
    background:#f8fafc;
}
.icon1>div,.icon2>div,.icon3>div {
    font-size: 13px;
}

    
</style>